<template>
	<uni-list>
		<uni-list-item title="日历" note="mo-simple-date" link to="/pages/components/mo-simple-date/index" @click="onClick($event,1)" ></uni-list-item>
		<uni-list-item title="粘性布局" note="mo-sticky" link to="/pages/components/mo-sticky/index" @click="onClick($event,1)" ></uni-list-item>
		<uni-list-item title="虚拟列表" note="mo-virtual-scroller" link to="/pages/components/mo-virtual-scroller/index" @click="onClick($event,1)" ></uni-list-item>
	</uni-list>
</template>

<script>
	import { getStatistics } from '@/api'
	export default {
		data() {
			return {
				list: null
			}
		},
		onLoad(){
			this.getStar()
		},
		methods: {
			async getStar(){
				const res = await getStatistics()
			},
			onClick(time){
				console.log('跳转',time)
			},
		}
	}
</script>

<style lang="scss" scoped>
	$theme-color: rgb(255, 165, 104);
	$am-color: rgb(8, 201, 95);
	$pm-color: rgb(235, 148, 35);
	$act-color: rgb(50, 105, 223);
	page{
		background: #f8f8f8;
	}
	.mt20{
		margin-top: 20rpx;
	}
	.container {
		padding: 0 20rpx;
	}
	.colls{
		position: relative;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: $theme-color;
		font-size: 24rpx;
		&::before{
			display: block;
			content: '';
			margin-top: 5rpx;
			margin-right: 10rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 10rpx;
			background-color: $theme-color;
		}
		&.am{
			color: $am-color;
			&::before{
				background-color: $am-color;
			}
		}
		&.pm{
			color: $pm-color;
			&::before{
				background-color: $pm-color;
			}
		}
		&.act{
			color: $act-color;
			&::before{
				background-color: $act-color;
			}
		}
	}
</style>
